{extend name="./base" /}
{block name="css"}
	<style>
		body{margin:10px auto;width: 750px;}
		ul{margin-top:5px;}
		li{margin-top:3px;}
		.layui-form-switch{margin-top: 0;}
		#tree1 ul+ul{border-top: 1px dashed #e2e2e2;}
	</style>
{/css}
{block name="body"}
<div class="layui-fluid">
	<div class="layui-card">
		<!-- TABLE正文 -->
		<div class="layui-card-body">
			<table id="tableList" lay-filter="tableList" class="layui-table"></table>
		</div>

		<!-- 表格列操作 -->
		<script type="text/html" id="actBar">
			{{# if(d.lv < 4){ }}
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">添加子规则</a>
			{{# } }}
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script>

		<!-- 表格头部操作 -->
		<script type="text/html" id="toolBar">

			<button lay-event="add" class="layui-btn layui-btn-sm icon-btn">
				<i class="layui-icon">&#xe654;</i>添加规则
			</button>
			<button lay-event="FoldAll" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
				<i class="layui-icon">&#xe602;</i>折叠全部
			</button>
			<button lay-event="ExpandAll" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
				<i class="layui-icon">&#xe61a;</i>展开全部
			</button>
		</script>

		<!-- 表格状态列 -->
		<script type="text/html" id="statusBar">
			<input type="checkbox" lay-filter="changeStatus" value="{{d.id}}" lay-skin="switch"
				   lay-text="启用|禁用" {{d.status==1?'checked':''}} style="display: none;"/>
			<p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
		</script>
	</div>
</div>

{/block}

{block name="script"}
<script>
	layui.config({
		base: '__STATIC__/layuiadmin/lib/extend/' //静态资源所在路径
	}).use(['layer', 'form', 'table', 'treeTable'], function () {
		var $ = layui.jquery, treeTable = layui.treeTable, form = layui.form, layer = layui.layer;

		var dataTable = treeTable.render({
			elem: '#tableList',
			url: "/admin/menu/index",
			tree: {
				iconIndex: 1,           // 折叠图标显示在第几列
				isPidData: true,        // 是否是id、pid形式数据
			},
			defaultToolbar: [],
			toolbar: '#toolBar',
			id: 'this.table',
			cols: [
				{field: 'id', title: '菜单ID', type: 'checkbox', align: 'center',},
				{
					field: 'title',
					title: '名称',
					templet: function(item){
						if(item.lv == 1){
							return '<span style="color:red;">'+item.title+'</span>';
						}else if(item.lv == 2){
							return '<span style="color:green;">'+item.title+'</span>';
						}else if(item.lv == 3){
							return '<span style="color:#FF8000;">'+item.title+'</span>';
						}else if(item.lv == 4){
							return '<span style="color:#aaa;">'+item.title+'</span>';
						}
					}
				},
				{field: 'addon', title: '所属插件', align: 'center'},
				{field: 'url',title: '链接',align: 'center',},
				{field: 'sort',title: '排序',align: 'center',edit: 'number'},
				{field: 'status', title: '状态', templet: '#statusBar', align: 'center'},
				{title: '操作', toolbar: '#actBar', align: 'center', minWidth: 130}
			]
		})
		// 表格头工具栏点击事件
		treeTable.on('toolbar(tableList)', function (obj) {
			if (obj.event === 'add') { // 添加
				showEditModal('添加', 0, 0);
			} else if (obj.event === 'FoldAll') { // 折叠全部
				doFold(0);
			} else if (obj.event === 'ExpandAll') { // 展开全部
				doFold(1);
			}
		});

		// 表格操作列点击事件
		treeTable.on('tool(tableList)', function (obj) {
			if (obj.event === 'add') { // 添加子菜单
				showEditModal('添加子', obj.data.id, 0);
			} else if (obj.event === 'edit') { // 修改
				showEditModal('编辑',obj.data.pid, obj.data.id);
			} else if (obj.event === 'del') { // 删除
				del(obj);
			}
		});

		// 排序编辑
		treeTable.on('edit(tableList)', function(obj){
			var loadIndex = layer.load(2);
			$.post("{:url('/admin/menu/edit')}", {
				'form[id]': obj.data.id,
				'form[sort]': obj.value
			}, function (res) {
				layer.close(loadIndex);
				dataTable.reload();
			}, 'json');
		});

		// 修改状态
		form.on('switch(changeStatus)', function (obj) {
			var loadIndex = layer.load(2);
			$.post("{:url('/admin/menu/edit')}", {
				'form[id]': obj.value,
				'form[status]': obj.elem.checked ? 1 : 2
			}, function (res) {
				layer.close(loadIndex);
				dataTable.reload();
			}, 'json');
		});

		// 表格展开/收起
		function doFold(type) {
			dataTable.reload(
					{
						url: '/admin/menu/index?showType=' + type
					}
			);
		}

		// 编辑表格
		function showEditModal(text, pid = 0, id = 0) {
			layer.open({
				type: 2,
				area: ['800px', '560px'],
				title: text + '规则',
				shade: 0.5,
				shadeClose: true,
				offset: 'auto',
				content: "/admin/menu/edit?pid=" + pid + '&id=' + id,
				resize: true,
				success: function (layero, index) {
					// layer.iframeAuto(index);
				}
			});
		}

		function del(obj){
			let ids = [];
			ids.push(obj.data.id);
			comDel(ids, '/admin/menu/del')
		}

	});
</script>
{/block}